<script setup lang="ts">
type DataItem = {
  key: string;
  name: string;
  age: number;
  address: string;
};
import type { Ref } from 'vue';
import type { ColumnsType } from 'ant-design-vue/es/table/interface';
import type { Schema, ExtendTableProps, Filter } from 'custom/types/comp';

import { h, reactive, ref } from 'vue';
import { Tag, Button, Space } from 'ant-design-vue';
import Comp from 'custom/table';
import Dialog from 'custom/dialog';
import Drawer from 'custom/drawer';

import { genColumn } from '@/tools/utils';

const title = ref('haha');
// const dataSource = reactive();
// const columns: ColumnsType = ;
const tableProps = reactive({
  columns: [
    genColumn({ title: '姓名', dataIndex: 'name', type: 'user' }),
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      customRender: ({ record }) => {
        return h(Tag, { color: 'pink' }, record.name);
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      width: 150,
      customRender: ({ record }) => {
        return h(Space, [
          h(Button, { type: 'link', onClick: () => remove(record as DataItem) }, '删除'),
          h(Button, { type: 'link', onClick: () => edit(record as DataItem) }, '编辑'),
        ]);
      },
    },
  ],
  dataSource: [
    {
      key: '1',
      name: '胡彦斌',
      age: 32,
      address: '西湖区湖底公园1号',
    },
    {
      key: '2',
      name: '胡彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ],
  loading: true,
  api: '123',
});

const filter = reactive<Filter>({
  // col: 8,
  list: [
    {
      type: 'Slot',
      label: '插槽',
      field: 'slot',
    },
    {
      type: 'Render',
      label: '插槽',
      field: 'render',
      render: () => h('div', 'hehehe'),
    },
    {
      type: 'Input',
      label: '姓名',
      field: 'name',
      rules: [{ required: true, message: 'haha' }],
    },
    {
      type: 'Input',
      label: '姓名',
      field: 'name1',
    },
    {
      type: 'Input',
      label: '姓名',
      field: 'name2',
    },
    {
      type: 'Input',
      label: '姓名',
      field: 'name3',
    },
    {
      type: 'Input',
      label: '姓名',
      field: 'name4',
    },
    {
      type: 'Select',
      label: '年纪',
      field: 'age',
      props: {
        options: [
          {
            value: 'jack',
            label: 'Jack',
          },
        ],
      },
    },
    {
      type: 'Select',
      label: '年纪',
      field: 'age2',
      props: {
        api: () => {
          return new Promise((resolve) => {
            setTimeout(resolve, 2000);
          });
        },
      },
    },
  ],
});

const remove = (record: DataItem) => {
  console.log('remove');
  open.value = true;
};
const edit = (record: DataItem) => {
  console.log('edit');
  open2.value = true;
};

const schemas = reactive<Schema[]>([]);
const modelFilter = ref({});
const open = ref(false);
const open2 = ref(false);

async function handleOk(cb: Function) {
  console.log(123);

  await new Promise((resolve) => {
    setTimeout(() => {
      resolve(0);
      cb && cb();
    }, 2000);
  });
}

const list = ref<Schema[]>([
  {
    type: 'Input',
    field: 'field1',
    label: 'test',
    rules: [{ required: true, message: '不能为空' }],
  },
  {
    type: 'Password',
    field: 'field2',
    label: 'test',
  },
  {
    type: 'Switch',
    field: 'field3',
    label: 'test',
  },
  {
    type: 'InputNumber',
    field: 'field4',
    label: 'test',
  },
  {
    type: 'Select',
    field: 'field5',
    label: 'test',
    props: {
      options: [{ label: 'label', value: 'value' }],
    },
  },
]);

const list2: Schema[] = [
  { type: 'Input', label: 'labe;l', field: 'field' },
  { type: 'Input', label: 'labe;l', field: 'field2' },
];

setTimeout(() => {
  title.value = '哈哈哈';
  tableProps.loading = false;
}, 1000);
</script>

<template>
  <main>
    <Comp
      v-model:filter="modelFilter"
      :filter-props="filter"
      :table-props="tableProps"
      :title="title"
      :schemas="schemas"
    >
      <template #slot> slot123 </template>
    </Comp>
    <Dialog v-model="open" @ok="handleOk" type="form" :list="list" />
    <Drawer v-model="open2" @ok="handleOk" type="form" :list="list2" />
    <!-- <Form :schemas="schemas"></Form> -->
    <!-- <w-form /> -->
  </main>
</template>
